<template>
	<view>
		<u-navbar :title-bold='true' title-color="black" :border-bottom='false' :title="title" :is-fixed="true"
			:placeholder="true"> </u-navbar>
		<view class="search-box">
			<u-search @search="search()" @custom="search()" v-model="keywords" class="search-box-u-search"
				placeholder="请输入" :clearabled="true" :animation="true"></u-search>
		</view>
		<u-toast ref="uToast" />
		<!-- <view class="address-list">
			<u-index-list :scrollTop="scrollTop" :indexList="indexList">
				<view v-for="(item, index) in indexList" :key="index">
					<u-index-anchor :index="item" />
					<navigator :url="'/pages/center/info?id=' + friend.friend_id" v-for="(friend,friendIdx) in friends[item]" :key="friendIdx" class="address-item">
						<image class="address-avatar" :src="friend.avatar" mode="widthFix"></image>
						<view class="address-info">{{friend.nickname}}</view>
					</navigator>
				</view>
			</u-index-list> -->
		<view style="background-color: #FFF;">
			<u-index-list :scrollTop="scrollTop" :indexList="indexList">
				<view v-for="(item, index) in list" :key="index">
					<u-index-anchor :custom-style="{'background-color': '#FFF',margin: '10rpx 0'}" :index="item.key" />
					<navigator :url="'/sub/center/mine/userInfo?id=' + itm.friend_user_id "
						v-for="(itm,idx) in item.value" :key="idx">
						<view class="list-cell">
							<image class="address-avatar" :src="itm.avatar" mode="widthFix"></image>
							<span style="margin-left: 16rpx;">{{itm.nickname}}</span>
						</view>
						<u-line v-if="index!=indexList.length-1 && idx!=item.value.length-1" />
					</navigator>
				</view>
			</u-index-list>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				indexList: [],
				friends: [],
				list: [],
				keywords: '',
				menu: 'top-friend',
				title: ''
			}
		},
		watch: {
			friends: {
				handler(newVal) {
					this.init(newVal)
				},
				// 立即处理 进入页面就触发
				immediate: true,
				// 深度监听 属性的变化
				deep: true
			},

		},
		onLoad(e) {
			if (e.menu) this.menu = e.menu
			this.ws.pageFun(this.pageDataLoad, this);
			this.title = e.title
		},
		onShow: function() {
			this.ws.checkNetwork(this)
			if (this.ws.pageRefresh.addressList) {
				// 被其他页面通知刷新此页
				this.ws.pageFun(this.pageDataLoad, this);
				return;
			}
		},
		onPullDownRefresh: function() {
			this.ws.pageFun(this.pageDataLoad(true), this);
			this.ws.onMessageCallBack.set('load_contact', (msg) => {
				if (msg.data.data.method == 'top-friend' && msg.data.data.refresh) {
					this.$refs.uToast.show({
						title: '刷新成功~',
						type: 'success'
					})
					uni.stopPullDownRefresh()
				}
			})
		},
		methods: {
			init(a) {
				this.list = Object.keys(a).map(key => ({
					key: key,
					value: a[key]
				}))
				console.log(this.list, '数据');
			},
			pageDataLoad: function(refresh = false) {
				this.ws.send({
					c: 'User',
					a: 'loadContact',
					data: {
						'method': this.menu,
						'refresh': refresh
					}
				})
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			search: function() {
				uni.navigateTo({
					url: '/sub/search/search?keywords=' + this.keywords
				})
			}
		}
	}
</script>

<style>
	.search-box {
		display: flex;
		align-items: center;
		padding: 20rpx 4vw;
		background: #FFFFFF;
	}

	.search-box .search-box-u-search {
		flex: 1;
	}

	.address-list {
		background: #FFFFFF;
	}

	.address-item {
		height: 120rpx;
		display: flex;
		align-items: center;
		padding: 0rpx 4%;
	}

	.address-avatar {
		height: 80rpx;
		width: 80rpx;
		border-radius: 16rpx;
	}

	.address-info {
		flex: 1;
		height: 120rpx;
		line-height: 120rpx;
		margin-left: 20rpx;
		font-size: 32rpx;
		border-bottom: 1px solid rgba(241, 241, 241, 0.6);
	}

	.list-cell {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
</style>